{/* Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import docs from 'docs:@react-spectrum/avatar';
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
import packageData from '@react-spectrum/avatar/package.json';

```jsx import
import {Avatar} from '@react-spectrum/avatar';
import {Flex} from '@react-spectrum/layout';
```

---
category: Content
keywords: [avatar]
---

# Avatar

<PageDescription>{docs.exports.Avatar.description}</PageDescription>

<HeaderInfo
  packageData={packageData}
  componentNames={['Avatar']}
  sourceData={[{type: 'Spectrum', url: 'https://spectrum.adobe.com/page/avatar/'}]}
  since="3.26.0" />

## Example

```tsx example
<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" />
```

## Content

The Avatar component is a thumbnail representation of an entity, such as a user or an organization. They accept a `src` attribute defining the image URL, and an `alt` attribute for an accessible description.

### Accessibility

By default, avatars are decorative and have an empty `alt` attribute. Standalone avatars with no surrounding context must have a custom `alt` prop defined for accessibility.

### Internationalization

To internationalize an Avatar, a localized string should be passed to the `alt` prop.

## Props

<PropTable component={docs.exports.Avatar} links={docs.links} />

## Visual options

### Disabled
[View guidelines](https://spectrum.adobe.com/page/avatar/#Disabled)
```tsx example
<Avatar src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" isDisabled />
```

### Size
[View guidelines](https://spectrum.adobe.com/page/avatar/#Size)

Sizes can either be one of the predefined avatar size variables, or a custom size in pixels.

```tsx example
<Flex gap="size-100" wrap>
  {[50, 75, 100, 200, 300, 400, 500, 600, 700].map(size => (
    <Avatar key={size} src="https://i.imgur.com/kJOwAdv.png" alt="default Adobe avatar" size={`avatar-size-${size}`} />
  ))}
  <Avatar src="https://i.imgur.com/kJOwAdv.png" alt="avatar with custom size" size={50} />
</Flex>
```
